<template>
    <div class="home-container">
        <!-- 数据统计卡片 -->
        <div class="stat-cards">
            <div class="stat-card" v-for="(stat, index) in stats" :key="index">
                <i :class="stat.icon"></i>
                <h3>{{ stat.title }}</h3>
                <p>{{ stat.value }}</p>
                <span :class="stat.trendClass">{{ stat.trend }}</span>
            </div>
        </div>

        <!-- 图表区域 -->
        <el-card class="chart-card">
            <template #header>
                <span>今日销售趋势</span>
                <el-button size="small" @click="refreshChart">刷新</el-button>
            </template>
            <div ref="chart" style="height: 300px;"></div>
        </el-card>

        <!-- 最近操作记录 -->
        <el-card class="action-card">
            <template #header>
                <span>最近操作记录</span>
                <el-link type="primary" @click="showAllActions">查看全部</el-link>
            </template>
            <el-table :data="recentActions" stripe>
                <el-table-column prop="time" label="时间"></el-table-column>
                <el-table-column prop="action" label="操作内容"></el-table-column>
                <el-table-column prop="user" label="操作人"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'Home',
    data() {
        return {
            stats: [
                {
                    icon: 'el-icon-s-shop',
                    title: '今日访客',
                    value: '1234',
                    trend: '+5%',
                    trendClass: 'trend-up'
                },
                {
                    icon: 'el-icon-money',
                    title: '今日销售额',
                    value: '￥5678',
                    trend: '-2%',
                    trendClass: 'trend-down'
                },
                {
                    icon: 'el-icon-goods',
                    title: '商品总数',
                    value: '100',
                    trend: '0%',
                    trendClass: 'trend-neutral'
                },
                {
                    icon: 'el-icon-s-order',
                    title: '待处理订单',
                    value: '10',
                    trend: '+10%',
                    trendClass: 'trend-up'
                }
            ],
            recentActions: [
                {
                    time: '2025-03-13 10:00',
                    action: '审核通过采购单 #123',
                    user: 'admin'
                },
                {
                    time: '2025-03-13 09:30',
                    action: '发布新商品：智能手表',
                    user: 'editor'
                }
            ]
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            const chart = echarts.init(this.$refs.chart);
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['10:00', '11:00', '12:00', '13:00', '14:00']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 250, 220],
                        type: 'line',
                        smooth: true,
                        areaStyle: {}
                    }
                ]
            };
            chart.setOption(option);
        },
        refreshChart() {
            this.$refs.chart.innerHTML = '';
            this.initChart();
        },
        showAllActions() {
            // 这里可以添加跳转到全部操作记录页面的逻辑
            console.log('查看全部操作记录');
        }
    }
};
</script>

<style scoped>
.home-container {
    padding: 20px;
    background-color: #f0f2f5;
}

.stat-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stat-card {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-right: 20px;
    text-align: center;
}

.stat-card:last-child {
    margin-right: 0;
}

.stat-card i {
    font-size: 32px;
    color: #409eff;
    margin-bottom: 10px;
}

.stat-card h3 {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.trend-up {
    color: #67c23a;
}

.trend-down {
    color: #f56c6c;
}

.trend-neutral {
    color: #909399;
}

.chart-card {
    margin-bottom: 20px;
}

.action-card {
    height: 300px;
    overflow-y: auto;
}
</style>